<template>
  <view class="background-image-container">

    <view class="form-content ss-flex">
      <u-icon
        @click="sheep.$router.back()"
        class="icon ss-flex-1"
        size="40rpx"
        color="#000"
        name="arrow-left"
      >
      </u-icon>
      <view class="ss-flex-1 title font-ALIMAMASHUHEITIBOLD">说明书</view>
      <view class="ss-flex-1 title font-ALIMAMASHUHEITIBOLD"></view>
    </view>
    <view class="ss-flex ss-row-center m-b-32">
      <image class="logo" :src="sheep.$url.static('/assets/img/register-logo.png')"></image>
    </view>
    <view class="text1">{{ content}}</view>

    <view class="text2">今天你养雀 明天雀养你</view>
    <view v-if="formData.type == 'ios'" @click="downLoadIos" class="ss-flex ss-row-center m-b-32">
      <image
        class="register-phone"
        :src="sheep.$url.static('/assets/img/register-iphone.png')"
      ></image>
    </view>
    <view v-else @click="downLoadAnd" class="ss-flex ss-row-center m-b-32">
      <image
        class="register-phone"
        :src="sheep.$url.static('/assets/img/register-anzhuo.png')"
      ></image>
    </view>
  </view>
</template>

<script setup>

  import { reactive, ref, computed } from 'vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import smsLogin from '@/sheep/components/s-auth-modal/components/sms-login.vue';
  import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  import AuthUtil from '@/sheep/api/member/auth';
  import settingApi from '@/sheep/api/member/setting';

  let content = ref('');
  const formData = reactive({
    type: '',
    showMask: '',
  });
  const loginBtnDisable = ref(true);

  const customStyle = {
    width: '60%',
    marginTop: '20px',
    color: '#fff',
    border: 'none',
    background: '#5350F1',
    height: '110rpx',
    borderRadius: '10rpx',
  };

  onLoad(async (options) => {
    formData.type = options.type;
    const { code, data } = await settingApi.getDictionary({ type: 'instructions' });
    if (code == 0) {
      content.value= options.type==='ios'?data[1].value:data[0].value
      console.log(data);
    }
  });

  // 监听输入框 输入合规手机号和验证码时 按钮才点亮 否则置灰
  function input() {
    setTimeout(function() {
      let reg = /^1[3-9]\d{9}$/;
      loginBtnDisable.value = !(reg.test(formData.mobile) && formData.code.length === 4);
    }, 0);
  }

  function sendCode() {
    if (formData.mobile) {
      getSmsCode('smsLogin', formData.mobile);
    } else {
      sheep.$helper.toast('请输入手机号');
    }
  }

  // 下载ios
  function downLoadIos() {
    // 跳转去下载
    window.open('https://www.pgyer.com/hQtMejQZ');
  }

  // 下载安卓
  function downLoadAnd() {
    // 跳转去下载
    window.location.href = 'https://sit-www.qwzhuque.com/quewan.apk';
  }

  function showMask() {
    formData.showMask = !formData.showMask;
  }

  const login = async (e) => {
    let reg = /^1[3-9]\d{9}$/;
    if (!formData.mobile || !reg.test(formData.mobile)) {
      sheep.$helper.toast('请正确输入手机号');
      return;
    }
    if (!formData.code && formData.code.length !== 4) {
      sheep.$helper.toast('请输入4位数字验证码');
    }
    if (formData.mobile && formData.code) {
      const { code, data } = await AuthUtil.smsLogin(formData);
      if (code === 0) {
        uni.switchTab({
          url: '/pages/index/index',
        });
        //false时跳转填写邀请码
        if (data.invitationCodeIndicated === true) {
          uni.switchTab({
            url: '/pages/index/index',
          });
        } else {
          uni.navigateTo({
            url: '/pages/index/invitation-code',
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .background-image-container {
    background-size: cover;
    background-position: center;
    height: 100vh;
    background: #f9fafd;
  }

  .form-title {
    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-right: 30rpx;
  }

  .m-b-32 {
    margin-bottom: 32rpx;
  }

  .register-btn {
    width: 494rpx;
    height: 100rpx;
    margin-top: 50rpx;
    margin-bottom: 90rpx;
  }

  .register-phone {
    position: fixed;
    bottom: 100rpx;
    width: 750rpx;
    height: 100rpx;
  }

  .logo {
    padding-top: 143rpx;
    width: 308rpx;
    height: 284rpx;
    margin-top: 90rpx;
  }

  .text1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    color: #232323;
    line-height: 34rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-align: center;
  }

  .text2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #232323;
    line-height: 34rpx;
    letter-spacing: 4px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 24rpx;
    margin-bottom: 36rpx;
  }

  .form-content {
    position: fixed;
    width: calc(100% - 48rpx);
    padding-top: 30rpx;
    height: 58rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    z-index: 999;

    .title {
      text-align: center;
      font-size: 40rpx;
      color: #232323;
    }
  }

  .inputBox {
    border-radius: 52px;
    background: #ffffff;
    font-size: 28rpx;
  }

  .margin {
    margin: 72rpx 0;
  }
</style>
